<route lang="json5">
{
  layout: 'demo',
  style: { navigationBarTitleText: 'transition动画' },
}
</route>

<script setup>
import { ref } from 'vue'

const name = 'Ro9nin'
const isActive = ref(true)
</script>

<template>
  <div class="page">
    <div class="card">
      <div class="card__header">
        <h3 class="card-title">{{ name }}</h3>
        <div class="card-subtitle">Transition & Animation</div>
      </div>
      <div class="card__content">
        <!-- <transition name> -->
        <!-- <transition name="slide"> -->
        <transition name="pulse">
          <div v-if="isActive" class="emoji">⚡</div>
        </transition>
      </div>
      <div class="card__action"></div>
      <button type="button" @click="isActive = !isActive">请按这里</button>
    </div>
  </div>
</template>

<style scoped>
@import './styles/app.css';
@import './styles/card.css';
@import './styles/animation.css';
</style>
